<!--
 * @Descripttion: 
 * @version: 
 * @Author: 宁乃楚
 * @Date: 2021-07-04 15:11:00
 * @LastEditors: 宁乃楚
 * @LastEditTime: 2021-07-06 11:06:50
-->
<template>
  <div class="account">
      <van-sticky :offset-top="0">
        <van-nav-bar
          title="账户安全"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    <div class="safe">
      <!-- 实名认证 -->
      <van-cell-group>
        <van-cell
          center
          to="/manager/certification"
          title="实名认证"
          is-link
          label="完成实名认证，尊享更多服务"
        />
      </van-cell-group>
      <!-- 完善用户个人信息 -->
      <van-cell-group>
        <van-cell
          center
          to="/manager/complete"
          title="完善个人信息"
          is-link
          label="完善个人信息,提供安全保障"
        />
      </van-cell-group>
      <!-- 修改密码 -->
      <van-cell-group>
        <van-cell
          center
          @click="changePass()"
          title="修改登录密码"
          is-link
          label="建议您定期修改密码以保护账户安全"
        />
      </van-cell-group>
      <!-- 修改手机号 -->
      <van-cell-group>
        <van-cell
          center
          title="修改手机号码"
          is-link
          label="若手机更换请尽快修改"
        />
      </van-cell-group>
      <!-- 查看用户个人信息 -->
      <van-cell-group>
        <van-cell
          center
          to="/manager/info"
          title="用户个人信息"
          is-link
          label="关于用户已保存的个人信息"
        />
      </van-cell-group>
      <!-- 头像上传 -->
      <van-cell-group>
        <van-cell
          center
          @click="changePic()"
          title="头像上传"
          is-link
          label="用户可更改自己的头像"
        />
      </van-cell-group>
    </div>
    <!-- 修改密码的模态框 -->
    <van-action-sheet v-model="show2" title="修改密码" @cancel="onCancel">
      <van-form @submit="onSubmit2"  >
        <!-- 密码输入框 -->
        <van-field
          v-model="oldPass"
          type="password"
          name="oldPass"
          label="旧密码"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入旧密码' }]"
        />
        <van-field
          v-model="newPass1"
          type="password"
          name="newPass1"
          label="新密码"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入新密码' }]"
        />
        <van-field
          v-model="newPass2"
          type="password"
          name="newPass2"
          label="再次输入新密码"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入新密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-action-sheet>
    <!-- 用户头像上传的模态框 -->
    <van-action-sheet v-model="show3" title="头像上传">
      <van-field name="uploader" label="用户头像">
        <template #input>
          <van-uploader
            :after-read="userPic"
            v-model="fileList1"
            :max-count="1"
          />
        </template>
      </van-field>
      <div class="btn">
        <van-button round block type="info" @click="changeUserPic()"
          >提交</van-button
        >
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
import { post_formData, post } from "../../http/axios";
import { Toast } from "vant";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来⾃⽗组件的数据
  props: {},
  data() {
    return {
      //   密码修改模态框
      show2: false,
      // 头像上传模态框
      show3: false,
      //   用户之前的密码
      oldPass: "",
      // 用户要修改的新密码
      newPass1: "",
      // 用户输入第二次新密码
      newPass2: "",
      fileList1: [],
      form: {},
      showKeyboard: true,
    };
  },
  computed: {
    // 引入user vuex中的方法
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入user vuex中的方法
    ...mapActions("user", ["getUserInfo"]),
    onCancel() {
      this.oldPass="";
      this.newPass1="";
      this.newPass2="";
    },
    // 修改密码表单提交
    async onSubmit2() {
      if (this.oldPass != this.userInfo.password) {
        this.$notify({
          message: "旧密码输入错误",
          background: "pink",
          duration: 1000,
        });
        this.show2 = false;
      } else {
        if (this.newPass1 != this.newPass2) {
          this.$notify({
            message: "两次输入的新密码输入不一致",
            background: "pink",
            duration: 1000,
          });
          this.show2 = false;
        } else {
          this.userInfo.password = this.newPass1;
          let data = {
            id: this.userInfo.id,
            username: this.userInfo.username,
            password: this.userInfo.password,
            telephone: this.userInfo.telephone,
            realname: this.userInfo.realname,
            gender: this.userInfo.gender,
            birth: this.userInfo.birth,
            email: this.userInfo.email,
            status: this.userInfo.status,
            userFace: this.userInfo.userFace,
            registerTime: this.userInfo.registerTime,
            nation: this.userInfo.nation,
            idCard: this.userInfo.idCard,
            idcardPhotoPositive: this.userInfo.idcardPhotoPositive,
            idcardPhotoNegative: this.userInfo.idcardPhotoNegative,
            bankCard: this.userInfo.bankCard,
            bankCardPhoto: this.userInfo.bankCardPhoto,
            balance: this.userInfo.balance,
            certificationStatus: this.userInfo.certificationStatus,
            certificationTime: this.userInfo.certificationTime,
          };
          let res = await post("/baseUser/saveOrUpdate", data);
          //给用户一个成功或失败的提示
          if (res.status == 200) {
            this.$notify({
              message: res.data.message,
              background: "pink",
              duration: 1000,
            });
            this.getUserInfo();
            this.$router.push("/login");
          } else {
            this.$notify.error(res);
          }
        }
      }
    },
    // 修改密码模态框显示
    changePass() {
      this.show2 = true;
    },
    // 用户头像上传模态框显示
    changePic() {
      this.show3 = true;
    },
    // 返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
    // 用户头像上传
    userPic(file, detail) {
      console.log(this.dataURLtoFileFun(file.content));
      let formData = new FormData();

      formData.append("file", this.dataURLtoFileFun(file.content, "file.jpg"));

      post_formData("http://121.199.29.84:8001/file/upload", formData).then(
        (res) => {
          console.log(this.form);
          if (res.data.status === 200) {
            this.form.userPic =
              "http://121.199.29.84:8888/" +
              res.data.data.groupName +
              "/" +
              res.data.data.id;
            this.fileList2 = [
              {
                url:
                  "http://121.199.29.84:8888/" +
                  res.data.data.groupName +
                  "/" +
                  res.data.data.id,
              },
            ];
          }
        }
      );
    },
    // bae64转⽂件对象
    dataURLtoFileFun(dataurl, filename) {
      // 将base64转换为⽂件，dataurl为base64字符串，filename为⽂件名（必须带后缀名，如.jpg,.png）
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    async changeUserPic() {
      let data = {
        id: this.userInfo.id,
        userface: this.form.userPic,
      };
      let res = await post("/baseUser/alterUserface", data);
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$notify({
          message: res.data.message,
          background: "pink",
          duration: 1000,
        });
        this.show = false;
        this.$router.push("/manager/mine");
      } else {
        this.$notify.error(res);
      }
    },
  },
  created() {
    this.getUserInfo();
  },
};
</script>

<style scoped>
.account /deep/ .van-nav-bar__title {
  color: white !important;
  font-size: 16px;
}
.account /deep/ .van-nav-bar {
  background-color: #fa5882;
  margin: 0;
  font-size: 16px;
}
.account /deep/ .van-nav-bar__text {
  color: white !important;
  font-size: 16px;
}
.account .van-nav-bar /deep/ .van-icon {
  color: white !important;
  font-size: 16px;
}
.van-cell {
  height: 60px;
  margin-bottom: 10px;
}
</style>